<template>
  <div class="EmergencyList">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/ResourceAllocation' }">资源调配</el-breadcrumb-item>
        <el-breadcrumb-item>资源投入统计</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <filterTitle @query="query" @reset="Reset" :form="form" :formData="formData" @node-click="deptChoose" >
        <!-- <el-form slot="filter" class="form" ref="form" :model="form" inline size="small" label-width="130px">
          <el-form-item :label="item.label + '：'" v-for="(item, index) in formData" :key="index" :rules="rules[item.id]" :prop="item.id">
            <LsdForm :compData="item" :form="form" @node-click="deptChoose(arguments, item)"/>
          </el-form-item>
        </el-form> -->
      </filterTitle>
      <!-- 列表表格 -->
      <LsdTable slot="gjxm" :actions="table.actions" :paginationAtrrs="paginationAtrrs" :compRef="table.compRef" ref="gjxm" :columns="table.columns" :title="table.title" :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSequenceFlag="table.isSequenceFlag" :nobtnHeight="table.nobtnHeight" @pageChange="handleSizeChange" @sort-change="SortChange" />
    </div>
    <!-- <div class="EmergencyList-center">
      <div class="EmergencyList-sstj">
        <div class="EmergencyList-sstj-icon"></div>
        <div class="EmergencyList-sstj-titel">筛选条件</div>
      </div>
      <div class="EmergencyList-form">
        <el-form :inline="true" :model="formInline" size="small">
          <el-form-item label="响应命令单：">
            <el-select v-model="formInline.xqlb" placeholder="请选择" clearable>
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="相关单位/部门：" label-width="150px">
            <el-select v-model="formInline.yjjb" placeholder="请选择" clearable>
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="影响时间：" label-width="120px">
            <el-select v-model="formInline.xxly" placeholder="请选择" clearable>
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="事件类别：" label-width="120px">
            <el-date-picker type="datetime" placeholder="请选择" value-format="yyyy-MM-dd HH:mm:ss" clearable v-model="formInline.date1" style="width: 100%"></el-date-picker>
          </el-form-item>
          <el-form-item class="QueryAndReset_btn">
            <el-button type="primary" @click="onSubmit(formInline)" size="small">查询</el-button>
            <el-button @click="resetForm(formInline)" size="small">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="EmergencyList-titel">资源投入统计列表</div>
      <div class="EmergencyList-table">
        <el-table :span-method="objectSpanMethod" min-height="200" border :header-cell-style="{ background:'#B1C8F9',color:'#000000', border: '1px solid #ccc'}" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" size="small" row-key="id" lazy :load="load" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">>
          <el-table-column type="index" label="序号" align="center">
          </el-table-column>
          <el-table-column label="应急事件/响应命令" min-width="220" align="center">
            <template slot-scope="scope">
              <el-button @click="detailList(scope.$index, scope.row)" type="text" size="small">
                {{ scope.row.lxr }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="xqlb" label="事件类别" align="center">
          </el-table-column>
          <el-table-column prop="yjjb" label="响应级别" align="center">
          </el-table-column>
          <el-table-column prop="yxfw" label="影响范围" align="center">
          </el-table-column>
          <el-table-column prop="date" label="影响时间" align="center">
          </el-table-column>
          <el-table-column prop="lxr" label="相关单位/部门" align="center">
          </el-table-column>
          <el-table-column label="人员（人次）" align="center">
            <el-table-column align="center" label="抢修人员" width="100">
              <template slot-scope="scope">
                <el-button @click="detailList(scope.$index, scope.row)" type="text" size="small">
                  {{ scope.row.ljtd }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" label="基干人员" width="100">
              <template slot-scope="scope">
                <el-button @click="detailList(scope.$index, scope.row)" type="text" size="small">
                  {{ scope.row.ljhf }}
                </el-button>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="车辆（台次）" align="center">
            <el-table-column align="center" label="抢修车辆" width="100">
              <template slot-scope="scope">
                <el-button @click="detailList(scope.$index, scope.row)" type="text" size="small">
                  {{ scope.row.ljtd }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" label="运输车辆" width="100">
              <template slot-scope="scope">
                <el-button @click="detailList(scope.$index, scope.row)" type="text" size="small">
                  {{ scope.row.ljhf }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" label="特种车辆" width="100">
              <template slot-scope="scope">
                <el-button @click="detailList(scope.$index, scope.row)" type="text" size="small">
                  {{ scope.row.hfl }}
                </el-button>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="装备" width="100">
            <template slot-scope="scope">
              <el-button @click="detailList(scope.$index, scope.row)" type="text" size="small">
                {{ scope.row.ljtd }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="物资" width="100">
            <template slot-scope="scope">
              <el-button @click="detailList(scope.$index, scope.row)" type="text" size="small">
                {{ scope.row.ljhf }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px,float: right" class="EmergencyList-table-pag flexBetween">
          <div class="fontSize14">共一条数据，共1页</div>
          <el-pagination background layout="prev, pager, next" :total="10">
          </el-pagination>
        </div>
      </div>

    </div> -->

  </div>
</template>

<script>
import { ResourceList } from "@/api/EmergencyDisposal/zydp";
import { getUnitTreeApi } from "@/api/EarlyWarningManagement/yjrb";

import { getDictByGroupEmergency } from "@/api/common.js";

export default {
  name: "ResourceStatisticsList",
  components: {},
  data() {
    return {
      form: {
        responseName: "",
        responseDept: "",
        responseDeptId: "",
        effectTime: "",
        eventCode: "",
        responseLvCode: "",
        effectRange: ""
      },
      // 筛选信息
      formData: [
        {
          elType: "input",
          id: "responseName",
          label: "响应命令单",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            "collapse-tags": true
          }
        },
        {
          elType: "selectTree",
          id: "responseDept",
          name: "responseDeptId",
          label: "相关单位/部门",
          attrs: {
            value: "",
            clearable: true,
            // filterable: true,
            "collapse-tags": true
          },
          options: {
            attrs: {
              value: ""
            }
          },
          treeData: {
            attrs: {
              data: []
            },
            props: {
              children: "children",
              label: "orgName",
              value: "id"
            }
          }
        },
        // {
        //   elType: "selectTree",
        //   id: "responseDeptId",
        //   label: "相关单位/部门",
        //   attrs: {
        //     value: "",
        //     size: "small",
        //     clearable: true,
        //     "collapse-tags": true,
        //     props: {
        //       label: "orgName",
        //       value: "id",
        //       checkStrictly: true,
        //       emitPath: false,
        //       expandTrigger: "hover"
        //     }
        //   },
        //   options: []
        // },
        {
          elType: "dateTimePicker",
          id: "effectTime",
          label: "影响时间",
          attrs: {
            value: "",
            size: "small",
            type: "datetimerange",
            clearable: true,
            "start-placeholder": "开始日期",
            "end-placeholder": "结束日期",
            "value-format": "yyyy-MM-dd HH:mm:ss"
          }
        },
        {
          elType: "select",
          id: "eventCode",
          dic: "dic_sjlb",
          label: "事件类别",
          attrs: {
            value: "",
            size: "small",
            filterable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "select",
          id: "responseLvCode",
          label: "响应级别",
          dic: "dic_xyjb",
          attrs: {
            value: "",
            size: "small",
            filterable: true,
            "collapse-tags": true
          },
          options: []
        },
        { elType: "input",
          id: "effectRange",
          label: "影响范围",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            "collapse-tags": true
          }
        }
      ],
      // 表格信息
      table: {
        compRef: "zysq",
        nobtnHeight: true,
        isSequenceFlag: true,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "资源投入统计列表",
        actions: [{}],
        tableData: [],
        columns: [
          {
            prop: "responseName",
            label: "响应命令单",
            align: "left",
            "width": "350px",
            render: (h, { row }) => {
              return (
                <div >
                  {
                    <span
                      class='commonTableStyle'
                      style='width:100%'
                      {...{
                        on: {
                          click: () => {
                            this.operinfo(row);
                          }
                        }
                      }}
                    >
                      {row.responseName}
                    </span>
                  }
                </div>

              );
            }
          },
          {
            prop: "eventName",
            label: "事件类别",
            align: "center",
            "min-width": "88px"
          },
          {
            prop: "responseLvName",
            label: "响应级别",
            align: "center",
            "min-width": "88px"
          },
          {
            prop: "effectRange",
            label: "影响范围",
            align: "center",
            "min-width": "88px"
          },
          {
            prop: "effectTime",
            label: "影响时间",
            align: "center",
            "width": "179px"
          },
          {
            prop: "responseDeptName",
            label: "相关单位/部门",
            align: "left",
            "width": "330px"
          },
          {
            prop: "occurrenceTime1",
            label: "人员（人次）",
            align: "center",
            children: [
              {
                prop: "emergencyRepairPersonNum",
                label: "抢修人员",
                align: "center",
                render: (h, { row }) => {
                  return (
                    <div>
                      {
                        <span
                          style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                          {...{
                            on: {
                              click: () => {
                                this.memberinfo(row);
                              }
                            }
                          }}
                        >
                          {row.emergencyRepairPersonNum}
                        </span>
                      }
                    </div>
                  );
                }

              }, {
                prop: "emergencyBackbonePersonNum",
                label: "基干人员",
                align: "center",
                render: (h, { row }) => {
                  return (
                    <div>
                      {
                        <span
                          style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                          {...{
                            on: {
                              click: () => {
                                this.memberinfo1(row);
                              }
                            }
                          }}
                        >
                          {row.emergencyBackbonePersonNum}
                        </span>
                      }
                    </div>
                  );
                }
              }
            ]
          },
          {
            prop: "occurrenceTime4",
            label: "车辆（台次）",
            align: "center",
            children: [
              {
                prop: "emergencyRepairVehicleNum",
                label: "抢修车辆",
                align: "center",
                render: (h, { row }) => {
                  return (
                    <div>
                      {
                        <span
                          style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                          {...{
                            on: {
                              click: () => {
                                this.vehicleinfo(row);
                              }
                            }
                          }}
                        >
                          {row.emergencyRepairVehicleNum}
                        </span>
                      }
                    </div>
                  );
                }

              },
              {
                prop: "emergencyTransportVehicleNum",
                label: "运输车辆",
                align: "center",
                render: (h, { row }) => {
                  return (
                    <div>
                      {
                        <span
                          style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                          {...{
                            on: {
                              click: () => {
                                this.vehicleinfo1(row);
                              }
                            }
                          }}
                        >
                          {row.emergencyTransportVehicleNum}
                        </span>
                      }
                    </div>
                  );
                }
              },
              {
                prop: "emergencySpecialVehicleNum",
                label: "特种车辆",
                align: "center",
                render: (h, { row }) => {
                  return (
                    <div>
                      {
                        <span
                          style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                          {...{
                            on: {
                              click: () => {
                                this.vehicleinfo2(row);
                              }
                            }
                          }}
                        >
                          {row.emergencySpecialVehicleNum}
                        </span>
                      }
                    </div>
                  );
                }
              }
            ]
          },
          {
            prop: "emergencyEquNum",
            label: "装备",
            align: "center",
            "min-width": "120px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                      {...{
                        on: {
                          click: () => {
                            this.equinfo(row);
                          }
                        }
                      }}
                    >
                      {row.emergencyEquNum}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "emergencySuppliesNum",
            label: "物资",
            align: "center",
            "min-width": "120px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                      {...{
                        on: {
                          click: () => {
                            this.suppliesinfo(row);
                          }
                        }
                      }}
                    >
                      {row.emergencySuppliesNum}
                    </span>
                  }
                </div>
              );
            }
          }
        ],
        tableAttr: {
          stripe: false,
          border: true,
          fit: true,
          treeProps: { children: "children", hasChildren: "hasChildren" },
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
      },
      pageNum: 1,
      pageSize: 10,
      // options: {
      //   dic_sjlb: [],
      //   dic_sjjb: [],
      //   dic_yxfw: [],
      //   dic_xxly: []
      // },
      formInline: {
        // date1: "",
        // xqlb: "",
        // yjjb: "",
        // xxly: "",
        // yxfw: ""
      },
      tableData: [],
      rules: {
        name: [
          { required: true, message: "请选择应急事件/响应命令", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getOptionsByDict();
    this.getUnitTree();
  },
  mounted() {
    this.resourceList();
  },
  methods: {
    deptChoose(val, item) {
      this.$set(this.form, "responseDept", val[0].orgName);
      this.$set(this.form, "responseDeptId", val[0].id);

    },
    // 获取筛选项
    getOptionsByDict() {
      this.formData.forEach(item => {
        if (item.dic) {
          getDictByGroupEmergency({ groupCode: item.dic }).then(res => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: Number(item.dicCode)
              };
            });
            item.options = option;
          });
        }
      });
    },
    // 跳转响应命令单详情
    operinfo(row) {
      this.$router.push({
        path: "/EmergencyResponseinfo",
        query: {
          id: row.id
        }
      });
    },
    // 跳转抢修人员信息
    memberinfo(row) {
      this.$router.push({
        path: "/RepairPersonnel",
        query: {
          id: row.id
        }
      });
    },
    memberinfo1(row) {
      this.$router.push({
        path: "/CadrePersonnel",
        query: {
          id: row.id
        }
      });
    },
    // 跳转抢修车辆信息
    vehicleinfo(row) {
      this.$router.push({
        path: "/RepairVehicles",
        query: {
          id: row.id
        }
      });
    },
    vehicleinfo1(row) {
      this.$router.push({
        path: "/TransportVehicles",
        query: {
          id: row.id
        }
      });
    },
    vehicleinfo2(row) {
      this.$router.push({
        path: "/SpecialVehicles",
        query: {
          id: row.id
        }
      });
    },
    // 跳转装备信息
    equinfo(row) {
      this.$router.push({
        path: "/EquipStatistic",
        query: {
          id: row.id
        }
      });
    },
    // 跳转物资信息
    suppliesinfo(row) {
      this.$router.push({
        path: "/SuppliesStatistic",
        query: {
          id: row.id
        }
      });
    },

    handleSizeChange(val) {
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      this.resourceList();
    },
    // resourceList() {
    //   ResourceList(this.form).then(res => {
    //     this.table.tableData = res.data
    //   })
    // },
    async resourceList() {
      const parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.form
      };
      const res = await ResourceList(parmas);
      this.table.tableData = res.data;
      this.paginationAtrrs.total = res.total;
    },
    // 查询
    query() {
      this.resourceList();
    },
    // 重置
    Reset() {
      this.form = this.$options.data().form;
      this.resourceList();
    },
    // 省市县排序
    SortChange() {

    },
    getUnitTree() {
      getUnitTreeApi().then(res => {
        this.formData[1].treeData.attrs.data = res;
      });
    }

  }
};
</script>

<style scoped lang="less">
@import "../../../../assets/style/ComponentStyle.less";

:deep(.el-table th.el-table__cell > .cell) {
  padding-left: 0;
  padding-right: 0;
}

:deep(.el-breadcrumb) {
  font-size: 16px;
}

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
  font-size: 16px;
}

.EmergencyList :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
  font-size: 16px;
}

.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}
</style>
